<template>
    <div>
        <el-table stripe class="match-list-table" row-class-name="cursor-pointer" :data="activitys"
            @row-click="selectActivity" header-row-class-name="table-header" table-layout="auto">
            <template v-slot:empty>
                <el-empty image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png" />
            </template>
            <el-table-column prop="date" label="状态" min-width="90">
                <template #default="{ row }">
                    <el-tag :type="jianchatime(row, datenow).type" effect="dark" size="default">
                        {{ jianchatime(row, datenow).text2 }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="比赛名" show-overflow-tooltip min-width="250"></el-table-column>
            <el-table-column prop="date" label="开始时间" show-overflow-tooltip min-width="120">
                <template #default="{ row }">
                    {{ TimeYH1(row.activitystarttime) }}
                    <!-- 至
                    {{ TimeYH1(row.activityendtime) }} -->
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" min-width="90">
                <template #default="{ row }">
                    {{ row.type === "public" ? "公开" : "非公开" }}
                </template>
            </el-table-column>
            <el-table-column prop="format" label="赛制" min-width="60">
            </el-table-column>
            <el-table-column prop="date" label="时长" show-overflow-tooltip min-width="100"
                :formatter="formatterDuration"></el-table-column>
            <!-- <el-table-column prop="date" label="计时方式" width="100">
                <template #default="{ row }">
                    {{ row.duration ? '个人计时' : '统一计时' }}
                </template>
            </el-table-column> -->
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { TimeYH1 } from "../../../util/time";
import { jianchatime } from "@/util/jianchatime";

const p = defineProps<{
    activitys: Studycodemodel.Iactivity[],
    isAdmin?: boolean,
    teamid?: number,
    delactivity?: (activityid?: number) => void,
    checkduplicate?: (activityid?: number) => void,
    paddingLeft?: string
}>()

// 赛制
enum Format {
    OI = "OI",
    IOI = "IOI",
}

const store = useStore(Storekey)
const route = useRoute()
const router = useRouter()

const user = computed(() => {
    return store.state.user
})
const teamid = computed(() => {
    return user.value?.teamid;
});
const datenow = computed(() => {
    return store.state.time
})

// formatter
function time(a: Date, b: Date) {
    const t = new Date(b).getTime() - new Date(a).getTime()
    let n: string | number = (t / 60 / 60 / 1000).toFixed(1)
    if (Number(n) === Math.floor(Number(n))) {
        n = Math.floor(Number(n))
    }
    return n + '小时'
}
function formatterDuration(row: Studycodemodel.Iactivity) {
    return row.duration ?
        `${(row.duration / 60).toFixed(1)}小时` :
        time(row?.activitystarttime, row?.activityendtime)
}

function selectActivity(row: Studycodemodel.Iactivity) {
    const to = { name: '比赛详情', params: { ID: row.ID } }
    router.push(to)
}
</script>

<style scoped>
/* 比赛状态 */
.info,
.primary,
.danger,
.success {
    width: 44px;
    height: 24px;
    color: #fff;
    display: inline-block;
    text-align: justify;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    border-radius: 5px;
}

/* 赛事结束-已结束 */
.info {
    background-color: rgba(236, 128, 141, 1);
}

/* 立即报名-报名中 */
.primary {
    background: rgb(112, 182, 3);
    /* transform: translateY(-3px); */
}

/* 即将开赛-未开始 */
.danger {
    background: rgb(170, 170, 170);
    /* transform: translateY(-3px); */
}

/* 进入比赛-比赛中 */
.success {
    background: var(--color-cheng);
    /* transform: translateY(-3px); */
}
</style>